<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form divClass" v-if="headerShow" style="float: right;">
                <Toolbar :items="toolbarList" @add="addHandler" @select="selectHandler" @del="deleteHandler">
                </Toolbar>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
            <!-- <a-tabs   :justify="true" :default-active-key="tabsKeys" @change="tabsChanges">
                <a-tab-pane> -->
              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height: calc(100% - 45px);" :defaultColDef="defaultColDef"
                class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
            <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                @change="PageSize" @page-size-change="change" style="justify-content: center"
                :page-size="pagination.pageSize" :current="pagination.page" />
            <!-- </a-tab-pane>
            </a-tabs> -->
        </template>
        <a-drawer :drawer-style="{ 'zIndex': 9999 }" :mask-closable="false" height="80%" :visible="pageData.showAdd8"
            unmountOnClose @ok="sideOk" @cancel="pageData.showAdd8 = false" :width="400" cancel-text='关闭' ok-text='保存'>
            <template #title>
                {{ pageData.sideTitle }}
            </template>
            <a-form ref="formRef" layout="horizontal" :model="objectOP">
                <a-form-item label="工序" label-col-flex="100px">
                    <a-select popup-container="html"  class="bacClass" :loading="loading" :allowClear="true" @search="handleSearch"
                        v-model="objectOP.workSection" :filter-option="false" allow-search @focus="focusSel"
                        @change="changeOn">
                        <a-option v-for="item in pageData.nameList" :value="item['processName']">{{
                            item['processName']
                        }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="工段" label-col-flex="100px">
                    <a-input disabled class="bacClass" v-model="objectOP.process" />
                </a-form-item>
                <a-form-item label="按克重" label-col-flex="100px">
                    <el-checkbox @change="handleChange1" v-model="objectOP.byGramWeight" :true-label="1"
                        :false-label="0"></el-checkbox>
                </a-form-item>
                <a-form-item label="按计件布种" label-col-flex="100px">
                    <el-checkbox v-model="objectOP.pieceClothState" :true-label="1" :false-label="0"
                        @change="handleChange2"></el-checkbox>
                </a-form-item>
                <a-form-item label="按计件布种" label-col-flex="100px">
                    <a-input :disabled="pageData.inputDisabled" class="bacClass" v-model="objectOP.pieceCloth" />
                </a-form-item>
                <a-form-item label="克重大于等于" label-col-flex="100px">
                    <a-input-number class="bacClass" v-model="objectOP.beginGramWeight" />
                </a-form-item>
                <a-form-item label="克重小于等于" label-col-flex="100px">
                    <a-input-number class="bacClass" v-model="objectOP.endGramWeight" />
                </a-form-item>
                <a-form-item label="单价" label-col-flex="100px">
                    <a-input-number class="bacClass" v-model="objectOP.tonPrece" />
                </a-form-item>

            </a-form>
        </a-drawer>
    </pageTabelLayout>
</template>
<script setup lang="ts">
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";
import { ref, reactive } from "vue"
import { post, get } from "@/api/http"
import { localeText } from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import { Message, Modal } from "@arco-design/web-vue"
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { FormInstance } from "@arco-design/web-vue/es/form";
import { pagingList } from "@/api/paging";
import { baseURL } from '../../../../api/axios.config'
import axios from "axios";
const toolbarList: any = ref(['查询', '新增', '删除'])
// const handleChange1 = (() => {
//     if (objectOP.byGramWeight == 1) {
//         objectOP.pieceClothState = 0
//         pageData.inputDisabled = true
//         objectOP.pieceCloth = ''
//     } else {
//         objectOP.pieceClothState = 0
//         pageData.inputDisabled = false
//     }
// })
const handleChange1 = (() => {
    if (objectOP.byGramWeight == 1) {
        objectOP.pieceClothState = 0
        pageData.inputDisabled = true
        objectOP.pieceCloth = ''
    } else {
        objectOP.pieceClothState = 0
        pageData.inputDisabled = true
    }
})
const handleChange2 = (() => {
    if (objectOP.pieceClothState == 1) {
        objectOP.byGramWeight = 0
        pageData.inputDisabled = false
    } else {
        objectOP.byGramWeight = 0
        pageData.inputDisabled = true
    }
})
function PageSize(val: any) {
    pagination.page = val
    doRefresh();
}

function change(val: any) {
    pagination.pageSize = val
    doRefresh();
}
const headerShow = ref(true)
const tableDataList = ref([])


const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}
const localeText1: any = ref(localeText)
const tc = [
    {
        showRowGroup: 'hide_def',
        "headerName": "",
        "checkboxSelection": true,
        "headerCheckboxSelection": true,
        "pinned": "left",
        "width": 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: "left",
    },
    {
        headerName: '工序',
        field: 'workSection',
        width: 150,
        filter: 'workSection',
    },
    {
        headerName: '工段',
        field: 'process',
        width: 150
    },
    {
        headerName: '按克重',
        field: 'byGramWeight',
        width: 150,
        cellRenderer: {
            template: `
            <el-checkbox v-model="val" :true-label="1" :false-label="0" disabled></el-checkbox>
            `,
            setup(props: any) {
                let val = ref()
                val.value = props.params.data.byGramWeight
                return {
                    val
                }
            }
        }
    },
    {
        headerName: '按计件布种',
        field: 'pieceClothState',
        width: 150,
        cellRenderer: {
            template: `
            <el-checkbox v-model="val" :true-label="1" :false-label="0" disabled></el-checkbox>
            `,
            setup(props: any) {
                let val = ref()
                val.value = props.params.data.pieceClothState
                return {
                    val
                }
            }
        }

    },
    {
        headerName: '按计件布种',
        field: 'pieceCloth',
        width: 150
    },
    {
        headerName: '克重大于等于',
        field: 'beginGramWeight',
        width: 150
    },
    {
        headerName: '克重小于等于',
        field: 'endGramWeight',
        width: 150
    },
    {
        headerName: '单价',
        field: 'tonPrece',
        width: 150
    },
    {
        headerName: "创建人",
        field: "createName",
        width: 150
    },
    {
        headerName: "创建时间",
        field: "createTime",
        width: 150
    },
    {
        headerName: "最后修改人",
        field: "updateName",
        width: 150
    },
    {
        headerName: "最后修改时间",
        field: "updateTime",
        width: 150
    },
    {
        headerName: '操作',
        field: 'id',
        pinned: 'right',
        width: 150,
        cellRenderer: {
            template: `
            <el-button style="color:#165dff;" @click="a" class="gesture" link>修改</el-button>
            `,
            setup(props: any) {
                const a = () => {
                    editHandler(props.params.data)
                }
                return {
                    a
                }
            }
        }
    }
]

const objectOP = reactive<{
    id: any;
    workSection: any
    process: any
    byGramWeight: any
    pieceClothState: any
    pieceCloth: any
    beginGramWeight: any
    endGramWeight: any
    tonPrece: any



    createName: string | undefined;
    createTime: string | undefined;
    updateName: string | undefined;
    updateTime: string | undefined;
    deleteState: any
}>({
    id: null,
    workSection: '',
    process: '',
    byGramWeight: null,
    pieceClothState: null,
    pieceCloth: '',
    beginGramWeight: null,
    endGramWeight: null,
    tonPrece: null,




    updateTime: "",
    updateName: "",
    createName: "",
    createTime: "",
    deleteState: 0
});
const pageData = reactive<{
    sideTitle: string,
    showAdd8: boolean,
    pageLoading: boolean,
    nameList: any[],
    nameList1: any[],
    inputDisabled: boolean
}>({
    sideTitle: "新增车间工序计件单价",
    showAdd8: false,
    pageLoading: false,
    nameList: [],
    nameList1: [],
    inputDisabled: false,
});

const editHandler = (record: any) => {


    for (let key in record) {
        objectOP[key] = record[key]
    }
    handleChange1()
    handleChange2()
    // console.log(objectOP.byGramWeight, record.byGramWeight, '1111111111111111111');
    pageData.sideTitle = '修改车间工序计件单价';
    pageData.showAdd8 = true;

}
const addHandler = () => {
    for (var key in objectOP) {
        if (key == "id") {
            objectOP[key] = null;

        } else {
            objectOP[key] = '';
        }
    }
    handleChange1()
    handleChange2()
    pageData.sideTitle = "新增车间工序计件单价";
    pageData.showAdd8 = true;
}
const selectHandler = () => {
    doRefresh()
}


// 新增事件
const formRef = ref<FormInstance>();
const sideOk = () => {
    formRef.value?.validate().then((err) => {
        if (!err) {
            if (pageData.sideTitle === "新增车间工序计件单价") {
                post({
                    url: "/dwPc/WorkshopProcessPiece/insert",
                    data: [objectOP]
                }).then((res: any) => {
                    if (res.code === 200) {
                        formRef.value?.resetFields();
                        pageData.showAdd8 = false;
                        Message.success({
                            content: "新增成功",
                            duration: 5000,
                        });
                        doRefresh();
                    } else {
                        Message.error({
                            content: res.message,
                            duration: 5000,
                        });
                    }
                })
            } else {
                post({
                    url: "/dwPc/WorkshopProcessPiece/update",
                    data: [objectOP]
                }).then((res: any) => {
                    if (res.code === 200) {
                        formRef.value?.resetFields();
                        pageData.showAdd8 = false;
                        Message.success({
                            content: "修改成功",
                            duration: 5000,
                        });
                        doRefresh();
                    } else {
                        Message.error({
                            content: res.message,
                            duration: 5000,
                        });
                    }
                })
            }
        }
    })
}

// 下拉框
const focusSel = () => {
    selCxAll({ "processName": "" });
}
const options = ref<any>(pageData.nameList);
const loading = ref(false);
const handleSearch = (value: any) => {
    if (value) {
        const ob = { processName: value, deleteState: 0 }
        loading.value = true;
        selCxAll(ob);
        options.value = pageData.nameList;
        loading.value = false;
    } else {
        options.value = []
    }
};
function selCxAll(val: any) {
    post({
        url: "/pdm/worksectionWorkprocedure/select ",
        data: val
    }).then(({ data, code }: any) => {
        if (code === 200) {
            pageData.nameList = data;
        } else {
            Message.error({
                content: "查询失败！",
                duration: 5000,
            });
        }
    });
}
function changeOn(val: any) {
    pageData.nameList.filter((o: any) => {
        if (o.processName == objectOP.workSection) {
            objectOP.process = o.sectionName
        }
    })
}

// 删除事件
const deleteHandler = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
    }
    Modal.confirm({
        title: "系统提示",
        content: "确认删除选中的数据?",
        onOk() {
            post({
                url: "/dwPc/WorkshopProcessPiece/delete",
                data: gridOption.value.getSelectedRows().map((o: any) => { return o.id })
            }).then(({ code, data, message }: any) => {
                if (code === 200) {
                    Message.success({
                        content: "删除成功",
                        duration: 5000,
                    });

                    pagination.page = 1
                    doRefresh();

                } else {
                    Message.error({
                        content: '删除失败',
                        duration: 5000,
                    });
                }

            });
        },
    });
};
// 查询事件
const total = ref(10);
const total1 = ref(10);
const pagingList1: any = ref(pagingList)
const page = ref(1);
const size = ref(10);
function doRefresh() {
    pageData.pageLoading = true
    post({
        url: "/dwPc/WorkshopProcessPiece/getPage",
        data: {
            page: pagination.page,
            size: pagination.pageSize,
            deleteState: 0,
        },
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption.value.setRowData(data.list)
                total.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}
const pagination = usePagination(doRefresh);
const table = useTable();
</script>
<script lang="ts">
export default {
    name: "WorkshopProcessPiece",
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>
